<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻量级图片暗箱插件 - by：小枫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: aliceblue;
            text-align: center;
        }

        li {
            list-style: none;
            font-size: 1em;
        }

        .demo-btn button,
        .demo-btn a {
            display: inline-block;
            cursor: pointer;
            color: white;
            padding: 10px 20px;
            background-color: skyblue;
            border: none;
            border: 2px solid orangered;
            transition: background-color .35s;
        }

        .demo-btn a {
            margin-top: 1em;
            text-decoration: none;
            background-color: pink;
        }

        .demo-btn button:hover {
            background-color: rgb(161, 216, 237);
        }

        .demo-btn a:hover {
            background-color: rgb(255, 203, 212);
        }

        .dom-ljz {
            width: 100%;
        }

        .myTest li {
            margin: 10px 0;
        }

        .dom-ljz img {
            border: 2px solid orangered;
            width: 300px;
        }

        .dom-ljz p {
            color: coral;
        }

        .dom-ljz h5 {
            font-size: 1em;
        }
    </style>
</head>

<body>
    <!-- 
        id/class：xf-PicBlackbox (必填)
        data-pic：设置图片路径 (必填)
        data-text：设置图片文本 (选填)
        data-src：data-src 具有懒加载功能可直接替代 src 属性，并且不用写 data-pic 属性，也会有图片暗箱功能（img标签必填）
        data-popUp: 开启懒加载后是否弹出图片，默认是弹出图片 添加data-popUp则不弹出可不写值（选填）

        img标签专用     => class="xf-PicBlackbox" data-src="图片路径" data-text="文字介绍"
        其他标签用的 => class="xf-PicBlackbox" data-pic="图片路径" data-text="文字介绍"
     -->

    <h1>轻量级图片暗箱插件 - demo</h1>
    <br>
    <div class="demo-btn">
        <button class="xf-PicBlackbox" data-pic="./myQQImg.png" data-text="点我复制文字">点我淡入图片呀</button>
        <br>
        <a class="xf-PicBlackbox" data-pic="./myQQImg.png" data-text="你好，陌生人！">我是小a，点我也可以显示图片</a>
    </div>
    <br>
    <div class="dom-ljz">
        <ul class="myTest"></ul>
        <h5>禁止弹图片, 文字的懒加载</h5>
        <img class="xf-PicBlackbox" data-src="https://nitaiv5.xfabe.com/assets/upload/wx.jpg" data-text="我是src引入的图片" data-popUp="0">
        <p>我加了data-popUp属性并且值为0不能弹出图片</p>
        <br>
        <ul class="myTest"></ul>
        <h5>禁止弹图片的懒加载</h5>
        <img class="xf-PicBlackbox" data-src="./music-home-2023.jpg" data-popUp>
        <p>我加了data-popUp属性但是没有写值所以也不弹出</p>
        <br>
        <ul class="myTest"></ul>
        <h5>可以弹图片, 文字的懒加载</h5>
        <img class="xf-PicBlackbox" data-src="./music-home-2023.jpg" data-text="我是src引入的图片">
        <p>我没有添加data-popUp是可以弹出</p>
        <br>
        <ul class="myTest"></ul>
        <h5>仅弹图片的懒加载</h5>
        <img class="xf-PicBlackbox" data-src="./music-home-2023.jpg">
        <p>我虽然没有添加data-text但也可以弹出</p>
        <br>
        <b>......</b>
        <br>
    </div>

    <!-- 引入插件 -->
    <script src="xf-PictureBlackbox.js"></script>

    <!-- 下面的是属于dom结构，不要复制 -->
    <script>
        const myTest = document.querySelectorAll('.myTest')
        myTest.forEach(test => {
            for (let i = 0; i < 20; i++) {
                const li = document.createElement('li')
                test.appendChild(li)
            }
            const lis = Array.from(test.querySelectorAll('li'))
            lis.forEach(li => {
                li.textContent = '下滑测试图片懒加载'
            })
        })
    </script>
</body>

</html>